<template>
    <div class="GPLOT-movebar" :style="{left : BoardWidth + 35 + 'px'}" @mousedown="mouseDown"></div>
</template>

<script>
export default {
    props: ['max', 'min'],
    data() {
        return {
            BoardWidth: 0
        }
    },
    mounted() {
        var ClientWidth = document.body.clientWidth;
        this.BoardWidth = ClientWidth - this.min - 35;
        this.$store.commit('layout/setLeft', { OptionWidth: this.min, BoardWidth: this.BoardWidth })
    },
    methods: {
        mouseMove(event) {
            var ClientWidth = document.body.clientWidth;
            let left = event.clientX;
            if (left < ClientWidth - this.max) {
                left = ClientWidth - this.max;
            } else if (left > ClientWidth - this.min) {
                left = ClientWidth - this.min;
            }
            this.BoardWidth = left - 35;
            this.$store.commit('layout/setLeft', { OptionWidth: ClientWidth - left, BoardWidth: this.BoardWidth });
        },
        mouseEnd() {
            document.body.style.cursor = "";
            document.removeEventListener("mousemove", this.mouseMove);
            document.removeEventListener("mouseup", this.mouseEnd);
        },
        mouseDown() {
            document.body.style.cursor = "col-resize";
            document.addEventListener("mousemove", this.mouseMove);
            document.addEventListener("mouseup", this.mouseEnd);
        }
    }
}
</script>